﻿
@{
    ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>HTML5大文件分片上传示例</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
        var page = {
            init: function () {
                $("#upload").click($.proxy(this.upload, this));
            },

            upload: function () {
                var file = $("#file")[0].files[0],  //文件对象
                    name = file.name,        //文件名
                    size = file.size,        //总大小
                    succeed = 0;

                var shardSize = 2 * 1024 * 1024,     //以2MB为一个分片
                    shardCount = Math.ceil(size / shardSize);   //总片数

                for (var i = 0; i < shardCount; ++i) {
                    //计算每一片的起始与结束位置
                    var start = i * shardSize,
                        end = Math.min(size, start + shardSize);

                    //构造一个表单，FormData是HTML5新增的
                    var form = new FormData();
                    form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分
                    form.append("filename", name);
                    form.append("piecefilename", name);//分片名称
                    form.append("total", shardCount);   //总片数
                    form.append("index", i + 1);        //当前是第几片

                    //Ajax提交
                    $.ajax({
                        url: "../Upload/Upload",
                        type: "POST",
                        data: form,
                        async: false,         //异步  //改成同步测试
                        processData: false,  //很重要，告诉jquery不要对form进行处理
                        contentType: false,  //很重要，指定为false才能形成正确的Content-Type
                        success: function () {
                            ++succeed;
                            $("#output").text(succeed + " / " + shardCount);
                        }
                    });
                }
            }
        };
        $(function () {
            page.init();
        });
    </script>
</head>
<body>
    <input type="file" id="file" />
    <button id="upload">上传</button>
    <span id="output" style="font-size:12px">等待</span>
</body>
</html>

